<template>
  <view class="custom-navbar">
    <up-navbar
      :title="title"
      @leftClick="leftClick"
      @rightClick="rightClick"
      :placeholder="true"
      :safeAreaInsetTop="true"
      :leftIconSize="leftIconSize"
    >
      <template #left v-if="leftIcon">
        <view class="u-nav-slot">
          <up-icon name="arrow-left" size="20"></up-icon>
          <up-line
            direction="column"
            :hairline="false"
            length="16"
            margin="0 8px"
          ></up-line>
          <up-icon name="home" size="20"></up-icon>
        </view>
      </template>
    </up-navbar>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";

// 定义组件属性
const props = defineProps({
  title: {
    type: String,
    default: "标题",
  },
  leftIcon: {
    type: Boolean,
    default: true,
  },
  leftIconSize: {
    type: Number,
    default: 20,
  },
});

// 定义方法
const rightClick = () => {};

const leftClick = () => {
  var pages = getCurrentPages();
  if (pages && pages.length > 1) {
    uni.navigateBack();
  } else {
    uni.switchTab({
      url: "/pages/index/index",
    });
  }
};
</script>

<style lang="scss" scoped>
.custom-navbar {
  ::v-deep .u-navbar {
    .u-navbar__content {
      // height: $header-height !important;
    }
  }
  .u-nav-slot {
    display: flex;
    align-items: center;
    border: 1px solid #eee;
    border-radius: 100rpx;
    padding: 10rpx;
  }
}
</style>
